<template>
    <div>
        <my-loading-overlay :loading-overlay="loadingOverlay"></my-loading-overlay>
        <my-button-frame>
            <div class="d-inline-block">
                <my-download-btn></my-download-btn>
            </div>

            <div class="d-inline-block ml-1">
                <my-delete-btn @delete-success="getImageList()"></my-delete-btn>
            </div>

            <div class="d-inline-block ml-1">
                <my-rename-btn @rename-success="getImageList()"></my-rename-btn>
            </div>

            <div class="d-inline-block float-right" style="width: 445px">
                <v-text-field
                        v-model="search"
                        hide-details
                        outlined
                        label="搜索图片"
                        dense
                        class="mr-8"
                        clearable
                        append-icon="mdi-magnify"
                        @click:append=""
                >
                </v-text-field>
            </div>
        </my-button-frame>
        <my-info-bar type="image" :length="imageList.length"></my-info-bar>
        <my-list-space top="145px">
            <my-no-results-text v-if="filterList(search, imageList).length === 0"></my-no-results-text>
            <div v-else class="px-4">
                <v-row>
                    <v-col v-for="item in filterList(search, imageList)" cols="2" :key="item.id">
                        <v-hover v-slot:default="{ hover }">
                            <v-card
                                    height="200px"
                                    :elevation="hover ? 12 : 3"
                            >
                                <v-img
                                        class="img-item"
                                        :src="item.link"
                                        width="100%"
                                        height="100px"
                                        style="position: relative"
                                        @click="clickImage(item)"
                                >
                                    <template v-slot:placeholder>
                                        <v-row
                                                class="fill-height ma-0"
                                                align="center"
                                                justify="center"
                                        >
                                            <v-progress-circular indeterminate color="primary"></v-progress-circular>
                                        </v-row>
                                    </template>
                                </v-img>
                                <div class="check-background"></div>
                                <v-checkbox
                                        v-model="selected"
                                        :value="item"
                                        multiple
                                        style="position: absolute; top: 0; right: 0;"
                                        color="success"
                                ></v-checkbox>
                                <v-card-text style="cursor: default">
                                    <div class="text-truncate" :title="item.name">{{item.name}}</div>
                                    <div class="mt-1">{{item.time}}</div>
                                    <div class="mt-1">{{formatSize(item.size)}}</div>
                                </v-card-text>
                            </v-card>
                        </v-hover>
                    </v-col>
                </v-row>
            </div>
            <my-image-dialog :image="image" :image-dialog="imageDialog" @close="imageDialog = false"></my-image-dialog>
        </my-list-space>
    </div>
</template>

<script>
    import MyButtonFrame from "../common/MyButtonFrame";
    import MyDownloadBtn from "../common/MyDownloadBtn";
    import MyDeleteBtn from "../common/MyDeleteBtn";
    import MyRenameBtn from "../common/MyRenameBtn";
    import {formatSize, filterList} from "../../../util";
    import MyNoResultsText from "../common/MyNoResultsText";
    import MyListSpace from "../common/MyListSpace";
    import MyImageDialog from "../common/MyImageDialog";
    import MyLoadingOverlay from "../common/MyLoadingOverlay";
    import MyInfoBar from '../common/MyInfoBar'

    export default {
        name: "ImageList",
        components: {
          MyInfoBar,
            MyLoadingOverlay,
            MyImageDialog,
            MyListSpace,
            MyNoResultsText,
            MyRenameBtn,
            MyDeleteBtn,
            MyButtonFrame,
            MyDownloadBtn
        },
        created() {
            this.getImageList();
        },
        beforeDestroy() {
            this.$store.commit('setSelected', []);
        },
        data() {
            return {
                imageList: [],
                search: '',
                imageDialog: false,
                image: {},
                loadingOverlay: false
            }
        },
        methods: {
            formatSize,
            filterList,
            getImageList() {
                let _this = this;
                _this.loadingOverlay = true;
                _this.$store.commit('setSelected', []);
                _this._get({
                    url: 'system/disk/get-image-list'
                }).then(rsp => {
                    _this.imageList = rsp.data;
                }).catch(error => {
                    console.log(error)
                    _this.$serverError();
                }).finally(() => {
                    _this.loadingOverlay = false;
                })
            },
            clickImage(image) {
                this.image = image;
                this.imageDialog = true;
            }
        },
        computed: {
            selected: {
                get() {
                    return this.$store.state.selected;
                },
                set(value) {
                    this.$store.commit('setSelected', value)
                }
            }
        }
    }
</script>

<style scoped>
    .check-background {
        position: absolute;
        top: 23px;
        right: 11px;
        width: 18px;
        height: 18px;
        background-color: white;
        border-radius: 2px;
    }

    .img-item :hover{
        transform: scale(2);
    }
</style>